<template>
  <common-page :title="`${serverName}详情`">
    <el-button slot="header" @click="back">返回</el-button>
    <div slot="content" class="server-wrap">
      <div class="info-content">
        <div class="basic-info">
          <common-group-title
            title="CPU"
            class="basic-info-title"
          ></common-group-title>
          <div class="cpu-container" style="height: 360px" v-loading="loading">
            <title-card :titleVisible="false" style="height: 320px">
              <base-chart
                slot="content"
                :option="columnOption1"
                v-if="columnOption1.series[0].data.length"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
            <div class="disk-info">
              <el-row>
                <el-col :span="6">核心数：{{ cpuInfo.cpuNum || 0 }}</el-col>
                <el-col :span="6">用户使用率：{{ cpuInfo.sys || 0 }}%</el-col>
                <el-col :span="6">系统使用率：{{ cpuInfo.used || 0 }}%</el-col>
                <el-col :span="6">当前空闲率：{{ cpuInfo.free || 0 }}%</el-col>
              </el-row>
            </div>
          </div>
        </div>

        <div class="basic-info">
          <common-group-title
            title="内存"
            class="basic-info-title"
          ></common-group-title>
          <div class="memory-info" v-loading="loading">
            <div class="memory-info-content">
              <div class="memory-info-data">
                <div>内存</div>
                <div>共{{ memoryInfo.total || 0 }}G</div>
              </div>

              <div class="total-process"></div>
              <div
                class="real-process"
                :style="{
                  width: `${memoryInfo.usage}%`,
                  background: `${
                    memoryInfo.usage > peakObj.maxMemory ? '#f00' : '#7bb6fa'
                  }`,
                }"
              ></div>

              <div class="memory-info-used">
                <div>已用内存：{{ memoryInfo.used || 0 }}G</div>
                <div>剩余内存：{{ memoryInfo.free || 0 }}G</div>
              </div>
            </div>
            <div class="memory-info-content">
              <div class="memory-info-data">
                <div>JVM</div>
                <div>共{{ javaInfo.total || 0 }}M</div>
              </div>

              <div class="total-process"></div>
              <div
                class="real-process"
                :style="{
                  width: `${javaInfo.usage}%`,
                  background: `${
                    javaInfo.usage > peakObj.maxMemory ? '#f00' : '#fbc88f'
                  }`,
                }"
              ></div>

              <div class="memory-info-used">
                <div>已用内存：{{ javaInfo.used || 0 }}M</div>
                <div>剩余内存：{{ javaInfo.free || 0 }}M</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="info-content">
        <div class="basic-info">
          <common-group-title
            title="服务器信息"
            class="basic-info-title"
          ></common-group-title>
          <div style="padding-top: 18px" v-loading="loading">
            <el-form label-width="120px" v-model="serverInfo">
              <el-row :gutter="18">
                <el-col :span="12">
                  <el-form-item label="服务器名称：" prop="computerName">{{
                    serverInfo.computerName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="操作系统：" prop="osName">{{
                    serverInfo.osName
                  }}</el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="服务器IP：" prop="computerIp">{{
                    serverInfo.computerIp
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="系统架构：" prop="osArch">{{
                    serverInfo.osArch
                  }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

        <div class="basic-info">
          <common-group-title
            title="磁盘"
            class="basic-info-title"
          ></common-group-title>
          <div class="disk-legend animation-flash" v-loading="loading">
            <title-chart
              :titleVisible="false"
              type="chart-pie"
              :dataset="columnOption2"
              @chartClick="toDetail"
            ></title-chart>
          </div>
        </div>
      </div>

      <div class="info-content">
        <div class="jvm-info">
          <common-group-title
            title="JAVA虚拟机信息"
            class="basic-info-title"
          ></common-group-title>
          <div style="padding-top: 18px" v-loading="loading">
            <el-form label-width="120px" v-model="javaInfo">
              <el-row :gutter="18">
                <el-col :span="6">
                  <el-form-item label="JAVA名称：" prop="name">{{
                    javaInfo.name
                  }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="JAVA版本：" prop="version">{{
                    javaInfo.version
                  }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="启动时间：" prop="startTime">{{
                    javaInfo.startTime
                  }}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="运行时长：" prop="runTime">{{
                    javaInfo.runTime
                  }}</el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="18">
                <el-col :span="6">
                  <el-form-item label="安装路径：" prop="home">{{
                    javaInfo.home
                  }}</el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="项目路径：" prop="userDir">{{
                    javaInfo.userDir
                  }}</el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="运行参数：" prop="inputArgs">{{
                    javaInfo.inputArgs
                  }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <disk-detail ref="diskDetail" :maxDisk="peakObj.maxDisk"></disk-detail>
  </common-page>
</template>

<script>
import { fetchDetail } from "@/api/management/monitor/server";
import TitleChart from "@/components/EChart/TitleChart";
import BaseChart from "@/components/EChart/components/BaseChart";
import BaseList from "@/mixins/BaseList";
import commonIcon from "@/components/CommonIcon";
import DiskDetail from "./diskDetail";
export default {
  props: {
    uri: {
      type: String,
      default: "",
    },
    peakObj: {
      type: Object,
      default: () => {},
    },
    serverName: {
      type: String,
      default: "",
    },
  },
  mixins: [BaseList],
  components: { TitleChart, BaseChart, commonIcon, DiskDetail },
  data() {
    return {
      detail: {},
      loading: false,
      cpuInfo: {}, //cpu信息
      memoryInfo: {}, //内存信息
      serverInfo: {}, //服务器信息
      javaInfo: {}, //java虚拟机信息
      diskList: [], //磁盘
      timer: null,
      columnOption1: {
        tooltip: {
          trigger: "axis",
          formatter: (val) => {
            return val[0].value + "%";
          },
        },
        grid: {
          top: "40px",
          left: "50px",
          right: "40px",
          bottom: "30px",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            data: ["0", "", "", "", "", "", "", "", "", "", "", "", "1小时"],
          },
        ],
        yAxis: [
          {
            name: "使用率",
            min: 0,
            max: 100,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#E2EEF7",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
            axisLabel: {
              show: true,
              formatter(val) {
                return val + "%";
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        visualMap: {
          pieces: [
            {
              gt: 0, //大于
              color: "#f00",
            },
            {
              gte: 0,
              lte: 0, //小于等于
              color: "#76AAD4",
            },
          ],
          show: false, //标签是否显示
        },
        series: [
          {
            markLine: {
              data: [
                {
                  yAxis: 0,
                  label: {
                    position: "end",
                    color: "#f00",
                    // formatter: (e) => {
                    //   return e.value;
                    // },
                  },
                },
              ],
              silent: true, //鼠标移入警戒线，警戒线会变粗，false变，true不变
              symbol: false,
              lineStyle: {
                //警戒线的样式，颜色，宽度，类型
                color: "#f00",
                type: "dashed", //还有实线
                width: 1,
              },
            },

            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 0,

            lineStyle: {
              normal: {
                width: 2,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: "rgba(118,170,212,.3)",
              },
            },
            data: [],
          },
        ],
      },
      columnOption2: {
        dimensions: ["name", "value"],
        source: [],
        option: {
          color: ["#5971C9", "#72c141"],
          // color: ["#f00", "#72c141"],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true, //显示提示框
            formatter: function (params) {
              return `${
                params.name +
                ": " +
                params.data.tooltip_value +
                params.data.unit
              }`;
            },
          },
        },
      },
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    this.getDetailData();
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.getDetailData();
    }, sp_config.MONITOR_TIME);
  },

  methods: {
    back() {
      this.$emit("back");
    },

    toDetail() {
      this.$refs.diskDetail.show(this.diskList);
    },

    getDetailData() {
      this.loading = true;
      fetchDetail({ uri: this.uri })
        .then((res) => {
          if (res && res.code === 200) {
            this.javaInfo = (res.data && res.data.jvm) || {};
            this.serverInfo = (res.data && res.data.sys) || {};
            this.javaInfo.userDir =
              res.data && res.data.sys && res.data.sys.userDir;
            this.cpuInfo = (res.data && res.data.cpu) || {};
            this.memoryInfo = (res.data && res.data.mem) || {};

            this.diskList = (res.data && res.data.sysFiles) || [];

            if (res.data && res.data.queue && res.data.queue.length > 0) {
              this.columnOption1.series[0].data = res.data.queue
                .slice(res.data.queue.length - 13)
                .reverse();
            }

            if (res.data && res.data.sysAllFile) {
              let allData = res.data.sysAllFile;
              let enabled = (100 - allData.usage).toString();
              this.columnOption2.source = [
                {
                  name: "已用",
                  value: allData.used.split(" ")[0],
                  unit: allData.used.split(" ")[1],
                  percent: allData.usage,
                },
                {
                  name: "剩余可用",
                  value: allData.free.split(" ")[0],
                  unit: allData.free.split(" ")[1],
                  percent:
                    enabled.split(".")[1] && enabled.split(".")[1].length > 1
                      ? (+enabled).toFixed(2)
                      : +enabled,
                },
              ];

              if (
                +this.columnOption2.source[0].percent > this.peakObj.maxDisk
              ) {
                this.columnOption2.option.color = ["#f00", "#72c141"];
              }

              const self = this;
              this.columnOption2.option.legend.formatter = function (name) {
                let legendName = "",
                  legendOthers = "",
                  legendValue = "";
                self.columnOption2.source.forEach((item) => {
                  if (item.name === name) {
                    legendName = name;

                    legendOthers =
                      " " + " | " + " " + item.percent + "% " + " ";

                    legendValue = item.value + item.unit;
                  }
                });

                return (
                  "{a|" +
                  legendName +
                  "}" +
                  legendOthers +
                  "{c|" +
                  legendValue +
                  "}"
                );
              };
            }

            this.columnOption1.visualMap.pieces[0].gt = this.peakObj.maxCPU;
            this.columnOption1.visualMap.pieces[1].lte = this.peakObj.maxCPU;
            this.columnOption1.series[0].markLine.data[0].yAxis =
              this.peakObj.maxCPU;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.server-wrap {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 0 20px 20px 20px;
  overflow-y: scroll;
  color: #606266;
  .info-content {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .basic-info {
      border: 1px #dcdfe6 solid;
      width: calc(50% - 10px);
    }
    .jvm-info {
      border: 1px #dcdfe6 solid;
      width: 100%;
    }
  }
  .basic-info-title {
    background: #f5f7fa;
    padding: 0 10px;
  }
  .disk-legend {
    height: 320px;
    // box-shadow: #f56c6c 0px 0px 4px;
  }
  // .animation-flash {
  //   animation: glow 800ms ease-out infinite alternate;
  // }
  // @keyframes glow {
  //   0% {
  //     border-color: #ff0000;
  //     box-shadow: 0 0 5px rgba(255, 0, 0, 0.2),
  //       inset 0 0 5px rgba(255, 0, 0, 0.1), 0 1px 0 #ff0000;
  //   }
  //   100% {
  //     border-color: #ff0000;
  //     box-shadow: 0 0 20px rgba(255, 0, 0, 0.6),
  //       inset 0 0 10px rgba(255, 0, 0, 0.4), 0 1px 0 #ff0000;
  //   }
  // }
  .disk-info {
    border-top: 1px #dcdfe6 solid;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 14px;
  }

  .memory-info {
    height: 340px;
    .memory-info-content {
      height: 150px;
      margin: 0 90px;
      padding-top: 40px;
      position: relative;
      font-size: 14px;

      .memory-info-data {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      .memory-info-used {
        display: flex;
        justify-content: space-between;
        margin-top: 45px;
      }
    }
    .total-process {
      height: 35px;
      margin: 0 auto;
      background: #dcdfe6;
      position: absolute;
      width: 100%;
    }
    .real-process {
      height: 35px;
      margin: 0 auto;
      position: absolute;
    }
  }
  .chart-tooltip {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.5;

    .icon-wushuju {
      font-size: 36px;
    }

    .tip-content {
      font-size: 12px;
    }
  }
}
</style>
